<template>
  <div class="el-select v-select">
    <div class="el-input el-input--suffix el-input--small" :class="{ 'is-focus': softFocus }">
      <input
        type="text"
        autocomplete="off"
        placeholder="请选择"
        @focus="handleFocus"
        @blur="softFocus = false"
        class="el-input__inner"
        ref="input__inner"
        v-model="keyWord"
        :disabled="disabled"
        readonly="readonly"
        :class="{ 'disabled': disabled }"
      />
      <span class="el-input__suffix">
        <span class="el-input__suffix-inner">
          <i
            class="el-select__caret el-input__icon"
            :class="this.softFocus ? 'el-icon-arrow-up is-reverse' : 'el-icon-arrow-up'"
          ></i>
        </span>
      </span>
    </div>

    <el-popover placement="top" v-model="softFocus" popper-class="popover__wrap"
                transition="none"
                :close-delay="0">
      <div @mousedown="popoverClick($event)">
        <div v-for="item in options" :key="item.id">
          <div class="hd" v-if="item.type === 'hour'">
            <p class="el-select-group__title">{{ item.title }}</p>
            <ul>
              <li class="el-select-dropdown__item" :class="{ 'selected': keyWord == items }" @click="clickHour(items)" v-for="items in item.data" :key="items.id">
                <span>{{ items }}</span>
              </li>
            </ul>
          </div>
          <div class="content" v-else>
            <p class="el-select-group__title">{{ item.title }}</p>
            <el-checkbox-group v-model="checkData" @change="checkChange">
              <el-checkbox :label="items" v-for="items in item.data" :key="items.id"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="btn__wrap">
          <el-button size="mini" type="text" @click="softFocus = false">取消</el-button>
          <el-button type="infor" size="mini" @click="checkSave">确认</el-button>
        </div>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  props: {
    value: [String, Array],
    options: {
      type: Array,
      default: () => [
        {
          title: "按小时",
          type: "hour",
          data: ['小时']
        },
        {
          title: "按周",
          type: "week",
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
      ]
    },
    disabled: Boolean,
    readonly: Boolean
  },
  data() {
    return {
      softFocus: false,
      hour: null,
      checkData: []
    };
  },
  computed: {
    keyWord: {
      get() {
        const data = this.value.split(',');
        if (data.length >= 2) {
          this.checkData = data;
        } else {
          this.hour = data;
        }
        return data;
      },
      set(value) {
        const data = typeof value === 'string' ? value : value.join(',');
        this.$emit("input", data);
      }
    }
  },
  methods: {
    checkChange(data) {
      this.$refs.input__inner.focus();
      this.keyWord = data;
    },
    handleFocus() {
      if (this.readonly) return false;
      this.softFocus = true;
    },
    clickHour(keyWord) {
      this.checkData = [];
      this.keyWord = keyWord;
    },
    popoverClick(e) {
      if (e && e.preventDefault) e.preventDefault();
      else window.event.returnValue = false;
      return false;
    },
    checkSave() {
      this.$refs.input__inner.blur();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.v-select {
  .disabled {
    cursor: not-allowed;
    background-color: #f5f7fa;
    border-color:#e4e7ed;
  }
  /deep/ {
    .popover__wrap {
      margin: 5px 0;
      padding: 0;
      width: 100% !important;
      .hd {
        padding: 10px 0;
        border-bottom: $--border-style-base;
      }
      .btn__wrap {
        padding: 5px;
        text-align: right;
        margin: 0;
        border-top: $--border-style-base;
      }
      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        padding: 5px 20px;
        max-height: 160px;
        overflow-y: auto;
        @include scrollBar;
        .el-checkbox {
          height: 32px;
          line-height: 32px;
          margin: 0;
        }
      }
    }
    .el-select-group__title {
      color: #c6c7cc;
    }
    .el-checkbox-group {
      padding: 0 20px;
    }
  }
}
</style>
